<template>
  <div class="fund-income d-flex flex-column jc-between al-center">
    <div class="fund-updown fulled-w" :class="{ downing: !widget.data.updownState }">
      {{ widget.data.updownValue }}%
    </div>
    <div
      v-show="config.hasDesc"
      class="fulled-w"
      :style="{ ...config.descStyle, fontSize: `${config.descStyle.fontSize}px` }"
    >
      {{ updownType.text }}涨跌幅
    </div>
  </div>
</template>

<script>
  import { FUND_UP_DOWN_TYPE } from '@/constants';
  import { getStyle } from '@/utils';
  export default {
    props: {
      widget: {
        type: Object,
        default: () => ({})
      }
    },

    computed: {
      config() {
        return this.widget.config;
      },
      style() {
        return this.widget.style;
      },
      updownType() {
        return FUND_UP_DOWN_TYPE.find((item) => item.value === this.config.fundType) || {};
      }
    },
    methods: {
      getStyle
    }
  };
</script>

<style lang="scss" scoped></style>
